<template>
    <base-breadcrumb :title="titleName">
        <a-spin :spinning="loading">
            <div class="box">
                <a-card>
                    <title-name title="项目信息"></title-name>
                    <div class="main_content">
                        <a-descriptions :column="{ xs: 3, sm: 3, md: 3 }">
                            <a-descriptions-item label="分公司名称">{{ project.branchCompany || '无' }}</a-descriptions-item>
                            <a-descriptions-item label="项目名称">{{ project.projectName || '无' }}</a-descriptions-item>
                        </a-descriptions>
                    </div>
                </a-card>
            </div>
            <div class="box">
                <a-card>
                    <title-name title="律师函信息"></title-name>
                    <div class="main_content">
                        <a-descriptions :column="{ xs: 3, sm: 3, md: 3 }">
                            <a-descriptions-item label="函件编号">{{ lawyerLetterDetails.letterNum }}</a-descriptions-item>
                            <a-descriptions-item label="发函单位">{{ lawyerLetterDetails.sender }}</a-descriptions-item>
                            <a-descriptions-item label="涉及金额">{{ lawyerLetterDetails.amountInvolved }}
                            </a-descriptions-item>
                        </a-descriptions>
                        <a-descriptions :column="{ xs: 3, sm: 3, md: 3 }">
                            <a-descriptions-item label="收到时间">{{ lawyerLetterDetails.rogerThatTime }}
                            </a-descriptions-item>
                            <a-descriptions-item label="发函律所">{{ lawyerLetterDetails.letterToTheTawFirm }}
                            </a-descriptions-item>
                            <a-descriptions-item label="处理状态">{{ lawyerLetterDetails.status }}</a-descriptions-item>
                        </a-descriptions>
                        <a-descriptions :column="{ xs: 3, sm: 3, md: 3 }">
                            <a-descriptions-item label="备注">{{ lawyerLetterDetails.remarks }}</a-descriptions-item>
                        </a-descriptions>
                        <a-descriptions :column="{ xs: 3, sm: 3, md: 3 }">
                            <a-descriptions-item label="主要内容">{{ lawyerLetterDetails.mainContent }}
                            </a-descriptions-item>
                        </a-descriptions>
                    </div>
                </a-card>
            </div>
            <div class="box">
                <a-card>
                    <title-name title="批注提示"></title-name>
                    <a-button type="primary" style="margin-bottom: 10px; border-radius: 5px" @click="addRiskManagement"
                    >新增风险提示
                    </a-button
                    >
                    <a-table :columns="colums" :data-source="riskWarning" rowKey="tableId" :pagination="false">
                        <div slot="Serial" slot-scope="text, record, index">
                            <template>
                                <span>{{ index + 1 }}</span>
                            </template>
                        </div>
                        <div slot="attach" slot-scope="text, record">
                            <file-link :fileList="record.fileArrays"></file-link>
                        </div>
                        <div slot="prompt" slot-scope="text, record">
                            <template>
                                <div v-for="(item, index) in record.reminder" :key="index">
                                    <span>{{ item.name }}</span>
                                    <span style="margin-left: 10px">{{ item.position }}</span>
                                    <p v-for="(sub, i) in item.feedbackList" :key="i">
                                        {{ sub.time }}进行了一条反馈
                                        <span v-if="sub.isFeedback" style="color: red">超期反馈</span>
                                        <a style="margin-left: 10px" @click="getDetails(sub)">查看</a>
                                    </p>
                                </div>
                            </template>
                        </div>
                        <div slot="action" slot-scope="text, record">
                            <template>
                                <a-button type="primary" @click="getFeedback(record)">反馈意见</a-button>
                            </template>
                        </div>
                    </a-table>
                </a-card>
            </div>
        </a-spin>
        <div class="operation page-btn-right-top" style="text-align: right; margin-right: 20px">
            <a-button @click="$close()">关闭</a-button>
        </div>
        <div class="coverlayer">
            <feed-back
                :visible="visible"
                :feedbackData="feedbackData"
                @ok="() => (visible = false)"
                @cancel="() => (visible = false)"
            >
            </feed-back>
            <add-feedback
                ref="feedback"
                :visible="feedBackVisible"
                :loading="loading"
                @ok="postFeedback"
                @cancel="() => (feedBackVisible = false)"
            ></add-feedback>
            <add-ranks-Management
                ref="ranks"
                :visible="ranksVisible"
                :loading="loading"
                @cancel="() => (ranksVisible = false)"
                @ok="postAddRanks"
            ></add-ranks-Management>
        </div>
    </base-breadcrumb>
</template>

<script>
import { getLawyerLetterDetails, postFeedback, addRiskManagement, addRiskFeedbackContent } from '@/api/legal'
import feedBack from '../feedback'
import addFeedback from '../addFeedback'
import addRanksManagement from '@/views/Legal/caseLawyerLetter/lawyerLetter/addRanksManagement'

export default {
  name:'a'+Date.now(),
  components: {
        feedBack,
        addFeedback,
        addRanksManagement
    },
    data() {
        return {
            titleName: undefined,
            loading: false,
            queryParam: {},
            colums: [
                {
                    title: '序号',
                    scopedSlots: { customRender: 'Serial' }
                },
                {
                    title: '风险提示',
                    dataIndex: 'feedbackContent'
                },
                {
                    title: '录入时间',
                    dataIndex: 'entryTime'
                },
                {
                    title: '附件',
                    scopedSlots: { customRender: 'attach' }
                },
                {
                    title: '反馈期限',
                    dataIndex: 'feedbackPeriod'
                },
                {
                    title: '提示人员',
                    dataIndex: 'prompt',
                    scopedSlots: { customRender: 'prompt' }
                },
                {
                    title: '操作',
                    dataIndex: 'action',
                    scopedSlots: { customRender: 'action' }
                }
            ],
            riskWarning: [],
            project: {},
            lawyerLetterDetails: {},
            feedbackData: {},
            visible: false,
            feedBackVisible: false,
            feedbackId: undefined,
            ranksVisible: false
        }
    },
    mounted() {
        /**
         *初始化
         */
        let that = this
        that.getLawyerLetterDetails()
    },
    methods: {
        getLawyerLetterDetails() {
            let that = this
            this.loading = true
            getLawyerLetterDetails({ id: that.$route.query.id }).then((res) => {
                if (res.code === 200) {
                    that.riskWarning = res.data.riskWarning || ''
                    that.project = res.data.project || ''
                    that.lawyerLetterDetails = res.data.lawyerLetterDetails || ''
                }
                this.loading = false
            })
        },
        getDetails(record) {
            let that = this
            that.feedbackData.name = record.name
            that.feedbackData.position = record.position
            that.feedbackData.time = record.time
            that.feedbackData.content = record.feedbackContent
            that.visible = true
        },
        getFeedback(record) {
            this.feedBackVisible = true
            this.feedbackId = record.tableId
        },
        /**
         * 反馈意见
         */
        postFeedback(subQueryParam) {
            let that = this
            that.loading = true
            subQueryParam.id = that.$route.query.id
            subQueryParam.tableId = that.feedbackId
            const form = that.$refs.feedback.$refs.form
            form.validate((valid) => {
                if (!valid) {
                  this.$message.warning("请填写完所有必填项信息")
                    that.loading = false
                    return false
                } else {
                    addRiskFeedbackContent(subQueryParam, { headers: { 'Content-Type': 'application/json;charset=utf8' } })
                        .then((res) => {
                            that.loading = false
                            if (res.data.code === 200) {
                                that.$refs.feedback.queryParam = {}
                                that.$message.success('提交成功')
                                that.getLawyerLetterDetails()
                                that.feedBackVisible = false
                            } else {
                                this.$message.warning('提交失败')
                            }
                        })
                        .catch((err) => {
                            that.loading = false
                        })
                }
            })
        },
        addRiskManagement() {
            this.ranksVisible = true
        },
        postAddRanks(subQueryParam) {
            this.loading = true
            subQueryParam.id = this.$route.query.id
            if (
                !subQueryParam.fileArrays &&
                !subQueryParam.riskWarning &&
                !subQueryParam.feedbackPeriod &&
                !subQueryParam.reminder
            ) {
                this.$message.info('信息不完整')
                this.loading = false
                return false
            } else {
                subQueryParam.id = this.$route.query.id
                subQueryParam.businessCode = 'LCM04'
                addRiskManagement(subQueryParam, { headers: { 'Content-Type': 'application/json;charset=utf8' } })
                    .then((res) => {
                        this.loading = false
                        if (res.data.code === 200) {
                            this.$message.success('提交成功')
                            this.$refs.ranks.queryParam = {}
                            this.ranksVisible = false
                            this.getLawyerLetterDetails()
                        } else {
                            this.$message.warning('提交失败')
                        }
                    })
                    .catch((err) => {
                        this.loading = false
                    })
            }
        }
    }
}
</script>

<style scoped>
.box {
    margin: 12px 0;
}

.coverlayer {
    width: 100%;
    height: 100%;
    background: #000000;
    opacity: 0.4;
    filter: alpha(opacity=40);
}

.main_content {
    padding: 0 20px;
    box-sizing: border-box;
}
</style>
